<template>
	<view class="inf-page">
		<view class="part1">
			<image @click="backtoDetails()" src="../../static/img/Return.png"></image>
			<view class="name">{{JDname}}</view>
		</view>
		<view class="leixing">{{room}}</view>
		<view class="lin1"></view>
		<view class="part2">
			<view>入住：{{startdate}} &nbsp;退房：{{enddate}}&nbsp;(1晚)</view>
			<view>双床|不含早|有WiFi和宽带</view>
		</view>
		<view class="lin2"></view>
		<view class="part3">
			<view class="success">
				<image src="../../static/img/smile.png"></image>
				<view class="text">预订成功后，酒店将为您整完留房</view>
			</view>
			<view class="fail">
				<image src="../../static/img/警告.png"></image>
				<view class="text">该客房仅剩最后4间，再不下单......</view>
			</view>
		</view>
		<view class="lin3"></view>
		<view class="img">
			<view class="part4">
				<text>房间数：</text>
				<text>1间</text>
				<image src="../../static/img/向下箭头.png"></image>
			</view>
			<view class="lin2"></view>
			<view class="part5">
				<text>价格：</text>
				<text>{{price}}元/间</text>
			</view>
			<view class="lin2"></view>
			<view class="part5">
				<text>入住人：</text>
				<text>张三</text>
			</view>
			<view class="lin2"></view>
			<view class="part5">
				<text>联系方式：</text>
				<text>156*******</text>
			</view>
			<view class="lin2"></view>
			<view class="part4">
				<text>预计到店：</text>
				<text>18:00之前</text>
				<image src="../../static/img/向下箭头.png"></image>
			</view>
			<view class="lin2"></view>
		</view>
		<view class="lin4"></view>
		
		<view class="fapiao">
			<text>发票</text>
			<text>如需发票，请到酒店前台咨询</text>
		</view>
		<view class="zhifu">
			<view class="jiage">
				<text>实际支付：</text>
				<view class="price">{{price}}</view>
				<text>元</text>
			</view>
			<button @click="gotoPay" type="default" size="mini">确认支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 入住时间
				startdate:"",
				// 退房时间
				enddate:"",
				// 酒店名称
				JDname:"星光国际大酒店",
				// 预定房间类型
				room:"标准房",
				// 房间价格
				price:"200"
			}
		},
		onLoad(option) {
			// 日期
			this.startdate = option.startdate,
			this.enddate = option.enddate,
			// 酒店信息
			this.JDname = option.JDname
			this.room = option.room,
			this.price = option.price
		},
		mounted() {
		},
		methods: {
			// 返回酒店详情页
			backtoDetails() {
				uni.navigateBack({
					url:"../orderDetails/orderDetails"
				})
			},
			gotoPay() {
				// 跳转支付页面
				uni.navigateTo({
					url:"../pay/pay?price=" + this.price
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@bgcColor: skyblue;
	
.lin1{
	width: 100%;
	height: 3rpx;
	background-color: @bgcColor;
}
.lin2{
	width: 100%;
	height: 3rpx;
	background-color:#cccccc;
}
.success{
	display: flex;
}
.fail{
	display: flex;
}
.lin3{
	width: 100%;
	height: 10rpx;
	background-color: @bgcColor;
}
.part4{
	height: 55rpx;
	display: flex;
	padding-top: 7rpx;
	justify-content:space-between;
}
.part4 image{
	width: 20rpx;
	height: 20rpx;

}
.img image {
	width: 50rpx;
	height: 50rpx;
}
.success image{
	width: 50rpx;
	height: 50rpx;
}
.fail{
	margin-top: 10rpx;
}
.fail image{
	width: 50rpx;
	height: 50rpx;
}
.text{
	margin-left: 20rpx;
	margin-top: 5rpx;
}
.part5{
	display: flex;
	height: 55rpx;
	padding-top: 7rpx;
	
}
.part5 text{
	flex: 5;
}
.lin4{
	width: 100%;
	height: 20rpx;
	background-color: @bgcColor;
}
.zhifu{
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color:@bgcColor ;
}
.zhifu button{
	width: 40%;
	height: 110rpx;
	line-height: 110rpx;
	font-size: 40rpx;
	background-color: greenyellow;
}
.jiage{
	width: 60%;
	height: 110rpx;
	display: flex;
	line-height: 110rpx;
}
.price{
	font-size: 70rpx;
	color: red;
}
.zhifu text{
	font-size: 30rpx;
}

.part1{
	display: flex;
	height: 100rpx;
	font-size: 50rpx;
	background-color:@bgcColor;
}
.part1 image{
	flex: 1.5;
	width: 80rpx;
	height: 80rpx;
	margin-top: 10rpx;
}
.name{
	flex: 8;
	color: white;
	margin-top: 14rpx;
	margin-left: 100rpx;
	/* align-items: center; */
}
.leixing{
	height: 60rpx;
	padding-top: 20rpx;
	padding-left: 30rpx;
}
.part2{
	height: 50px;
	padding: 30rpx;
}
.part3{
	height: 70px;
	padding: 30rpx;
	justify-content: space-between;
	}
.fapiao{
	display: flex;
	height: 150rpx;
	align-items: center;
	justify-content: space-around;
}
</style>